<!-- https://blog.csdn.net/2202_75550100/article/details/135887557 -->
<!DOCTYPE html>
<html lang="en">
<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>轮播图</title>
		<link rel="stylesheet" href="./style.css">
</head>
	
<body>
		<div class="carousel" id="carousel">
			<!-- 左箭头 -->
			<div class="left" onclick="prevSlide()">&lsaquo;</div>

			<div class="box">
					<img class="item" src="./imgs/1.jpg">
			</div>
				<div class="dots">
					<!-- TODO: 修改TODO为正确的函数调用 -->
					<li onclick="jumpToSlide(0)" class="active" ></li>
					<li onclick="jumpToSlide(1)"></li>
					<li onclick="jumpToSlide(2)"></li>
					<li onclick="jumpToSlide(3)"></li>
					<li onclick="jumpToSlide(4)"></li>
				</div>

			<!-- TODO: 修改TODO为正确的函数调用 -->
			 <!-- 右箭头 -->
			<div class="right" onclick="nextSlide()">&rsaquo;</div>

		</div>
		<script src="./carousel.js"></script>
</body>
</html>